<template>
  <view class="order-out-box">
    <!--  v-if="$accessCheck($Access.orderQuerySearch)" -->
    <view class="order-status-tab">
      <view class="keyword-view clearfix">
        <view class="float_left">
          <view class="key-select">
            <u-icon
              @click="openFrom('show_key_menu')"
              label-pos="left"
              color="#879BBA"
              size="28"
              label-size="28"
              label-color="#879BBA"
              name="arrow-down"
              :label="keywordType"
            ></u-icon>
          </view>
          <view class="search-out">
            <u-search
              @clear="searchConfirm()"
              :show-action="false"
              @search="searchConfirm()"
              :clearabled="true"
              placeholder="请输入……"
              v-model="search_data.keyword"
              height="72"
              placeholder-color="#879BBA"
              color="#879BBA"
              bg-color="#ECF0F7"
            ></u-search>
          </view>
        </view>
        <view class="float_right" @click="openSearch"
          ><text class="custom-icon custom-icon-shaixuan"></text
        ></view>
      </view>
      <u-tabs-swiper
        ref="tabs"
        font-size="26"
        :current="status_current"
        :list="status_list"
        @change="statusChange"
        :is-scroll="false"
        inactive-color="#62738E"
        :bar-style="{
          borderRadius: '6rpx',
          height: '6rpx',
          width: '32rpx',
          backgroundColor: '#FB5904',
        }"
        :active-item-style="{ color: '#2D405E', fontSize: '32rpx' }"
      ></u-tabs-swiper>
    </view>
    <view class="top">
      <text class="float_left txt">全部订单</text>
      <text class="float_right txt">共{{ total }}条</text>
    </view>
    <scroll-view
      scroll-y
      class="order_ul"
      @refresherrefresh="refresherrefresh"
      :refresher-enabled="true"
      :refresher-triggered="refresher_triggered"
      @scrolltolower="scrollTolower"
      :scroll-top="scrollTop"
    >
      <view
        class="order_li"
        v-for="(item, index) in order_list"
        :key="index"
        @click="
          goPage(
            `/pages/order/orderInfo?userCenterId=${item.userCenterId}&id=${item.id}`
          )
        "
      >
        <view class="order_time clearfix">
          <view class="float_left">
            <view class="tag-circleRight">
              <image
                :src="
                  item.orderMsg === '待审核'
                    ? '../../static/img/ic-audit.png'
                    : item.orderMsg === '已关闭'
                    ? '../../static/img/ic-Closed.png'
                    : item.orderMsg === '已出库'
                    ? '../../static/img/ic-stock.png'
                    : item.orderMsg === '已完成'
                    ? '../../static/img/ic-Completed.png'
                    : item.orderMsg === '待出库'
                    ? '../../static/img/ic-delivered.png'
                    : item.orderMsg === '待取消'
                    ? '../../static/img/ic-cancel.png'
                    : '../../static/img/ic-delivered.png'
                "
                class="img"
              ></image>
            </view>
            <text class="txt">{{ item.no }}</text>
          </view>
          <view class="float_right">
            <image
              :src="
                parseInt(item.payStatus) === 5
                  ? '../../static/img/ic-Paid.png'
                  : parseInt(item.payStatus) === 4
                  ? '../../static/img/ic-Unpaid.png'
                  : '../../static/img/ic-pay-bf.png'
              "
              style="width: 102rpx; height: 29rpx"
            ></image>
          </view>
        </view>
        <view class="order_bottom">
          <view class="order_params">
            客户名称
            <text class="right-txt">{{ item.customerName }}</text>
          </view>
          <view class="order_params clearfix">
            <view class="float_left">
              下单时间
              <text class="right-txt">{{
                $u.timeFormat(item.createTime, "yyyy-mm-dd hh:MM:ss")
              }}</text>
            </view>
            <view class="float_right" style="margin-right: 20rpx"
              ><u-button
                size="mini"
                @click="copyOrderInfo(item.userCenterId, item.id)"
                >一键复制</u-button
              ></view
            >
          </view>
        </view>
        <view
          class="clearfix pay-status-tip"
          :class="[
            parseInt(item.payStatus) === 5
              ? 'pay-success'
              : parseInt(item.payStatus) === 4
              ? 'pay-danger'
              : 'pay-warning',
          ]"
        >
          <text class="float_left">
            <text class="txst">订单金额</text>
            <text class="money-text">{{
              $utils.formattedNumber(item.payAmount)
            }}</text>
            【{{ item.payTypeMsg }}】
          </text>
          <view
            class="float_right txst"
            v-if="parseInt(item.returnStatus) !== 0"
          >
            <text
              :class="[
                parseInt(item.returnStatus) === 1
                  ? 'warning-status'
                  : 'primary-status',
              ]"
            >
              {{ parseInt(item.returnStatus) === 1 ? "部分退货" : "全部退货" }}
            </text>
          </view>
        </view>
      </view>
      <u-loadmore v-if="order_list.length" :status="load_status" />
      <view v-if="!order_list.length" class="empty-view"
        ><u-empty text="暂无订单" mode="order"></u-empty
      ></view>
    </scroll-view>
    <u-popup v-model="search_show" mode="right">
      <view class="search-pop">
        <uniStatusBar></uniStatusBar>
        <view class="form-view" style="padding-top: 45px">
          <u-form label-width="160rpx" label-position="left">
            <u-form-item label-position="top" label="下单日期">
              <view class="date-li">
                <picker mode="date" @change="bindDateStartChange">
                  <text class="date-li">{{
                    search_data.start
                      ? $u.timeFormat(search_data.start, "yyyy-mm-dd")
                      : "开始日期"
                  }}</text>
                </picker>
              </view>
              <view class="date-line">-</view>
              <view class="date-li">
                <picker mode="date" @change="bindDateEndChange">
                  <text class="date-li">{{
                    search_data.end
                      ? $u.timeFormat(search_data.end, "yyyy-mm-dd")
                      : "结束日期"
                  }}</text>
                </picker>
              </view>
            </u-form-item>
            <u-form-item label="下单客户">
              <view
                class="clearfix form-val"
                @click="goPage('/pagesT/customer/selCustomer')"
              >
                <text class="float_left ellipsis">{{
                  search_data.customerId ? search_data.customerName : "请选择"
                }}</text>
                <view
                  class="float_right"
                  @click.stop="clearValue('customerId')"
                >
                  <u-icon
                    :name="
                      !search_data.customerId
                        ? 'arrow-right'
                        : 'close-circle-fill'
                    "
                    size="28"
                    color="#999999"
                  ></u-icon>
                </view>
              </view>
            </u-form-item>
            <u-form-item label="所属店铺">
              <view
                class="clearfix form-val"
                @click="goPage('/pagesT/shop/selShop')"
              >
                <text class="float_left ellipsis">{{
                  search_data.shopId ? search_data.shopName : "请选择"
                }}</text>
                <view class="float_right" @click.stop="clearValue('shopId')">
                  <u-icon
                    :name="
                      !search_data.shopId ? 'arrow-right' : 'close-circle-fill'
                    "
                    size="28"
                    color="#999999"
                  ></u-icon>
                </view>
              </view>
            </u-form-item>
            <u-form-item label="支付方式">
              <view
                class="clearfix form-val"
                @click="goPage('/pagesT/payment/selPayment')"
              >
                <text class="float_left ellipsis">{{
                  search_data.payType ? search_data.payTypeName : "请选择"
                }}</text>
                <view class="float_right" @click.stop="clearValue('payType')">
                  <u-icon
                    :name="
                      !search_data.payType ? 'arrow-right' : 'close-circle-fill'
                    "
                    size="28"
                    color="#999999"
                  ></u-icon>
                </view>
              </view>
            </u-form-item>
            <u-form-item label="客户类型">
              <view
                class="clearfix form-val"
                @click="goPage('/pagesT/customer/selCustomerType')"
              >
                <text class="float_left ellipsis">{{
                  search_data.customerType
                    ? search_data.customerTypeName
                    : "请选择"
                }}</text>
                <view
                  class="float_right"
                  @click.stop="clearValue('customerType')"
                >
                  <u-icon
                    :name="
                      !search_data.customerType
                        ? 'arrow-right'
                        : 'close-circle-fill'
                    "
                    size="28"
                    color="#999999"
                  ></u-icon>
                </view>
              </view>
            </u-form-item>
            <u-form-item label="订单来源">
              <view class="clearfix form-val" @click="openFrom('from_show')">
                <text class="float_left ellipsis">{{
                  search_data.source ? search_data.sourceName : "请选择"
                }}</text>
                <view class="float_right" @click.stop="clearValue('source')">
                  <u-icon
                    :name="
                      !search_data.source ? 'arrow-right' : 'close-circle-fill'
                    "
                    size="28"
                    color="#999999"
                  ></u-icon>
                </view>
              </view>
            </u-form-item>
          </u-form>
        </view>

        <view class="search-btn">
          <view class="btn-li btn-reset" @click="clearValue()">重置</view>
          <view class="btn-li btn-submit" @click="searchConfirm">确定</view>
        </view>
      </view>
    </u-popup>
    <addBtn
      v-if="$accessCheck($Access.OrderAddAddOrder)"
      url="/pages/order/OrderAdd"
    ></addBtn>
    <u-select
      @confirm="fromChange"
      v-model="from_show"
      :list="order_from"
    ></u-select>
    <u-action-sheet
      @click="selKeyType"
      :list="keywordType_list"
      v-model="show_key_menu"
    ></u-action-sheet>
  </view>
</template>

<script>
import uniStatusBar from "../../components/uni-status-bar.vue";
export default {
  components: {
    uniStatusBar,
  },
  props: {
    customerData: {
      type: [Object, String],
      default: "",
    },
    shopData: {
      type: [Object, String],
      default: "",
    },
    paymentData: {
      type: [Object, String],
      default: "",
    },
    customerTypeData: {
      type: [Object, String],
      default: "",
    },
  },
  data() {
    return {
      refresher_triggered: false, //设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
      from_show: false,
      search_show: false,
      pay_type_list: [],
      pay_index: 0,
      load_status: "nomore",
      page: 1,
      pageSize: 10,
      total: 0,
      status_current: 0, // 状态current
      order_state: "all", // 订单状态
      order_list: [], // 订单列表
      keywordType: "单据编号",
      show_key_menu: false,
      search_data: {
        keywordType: "",
        keyword: "",
        payType: "",
        payTypeName: "",
        start: "",
        end: "",
        customerId: "",
        customerName: "",
        customerType: "",
        customerTypeName: "",
        source: "",
        sourceName: "",
        shopId: "",
        shopName: "",
      },
      order_from: [
        {
          label: "ios",
          value: 1,
        },

        {
          label: "安卓",
          value: 2,
        },
        {
          label: "微信小程序",
          value: 3,
        },
        {
          label: "后台创建",
          value: 4,
        },
        {
          label: "H5页面",
          value: 5,
        },
        {
          label: "pc页面",
          value: 6,
        },
        {
          label: "字节跳动小程序",
          value: 8,
        },
      ],
      status_list: [
        {
          value: "all",
          name: "全部",
        },
        {
          // 新订单
          value: "waitAudit",
          name: "待审核",
        },
        {
          // 等待出库
          value: "waitOutStock",
          name: "待出库",
        },
        {
          // 已出库
          value: "hasOutStock",
          name: "已出库",
        },
        {
          // 已收货
          value: "finish",
          name: "已完成",
        },
        {
          // 已取消
          value: "close",
          name: "已关闭",
        },
      ],
      scrollTop: -1,
      keywordType_list: [
        {
          text: "单据编号",
          value: 1,
        },
        {
          text: "自提码",
          value: 2,
        },
        {
          text: "商品名称",
          value: 3,
        },
        {
          text: "商品编码",
          value: 4,
        },
        {
          text: "收货人",
          value: 5,
        },
        {
          text: "电话",
          value: 6,
        },
        {
          text: "业务员",
          value: 7,
        },
        {
          text: "详细地址",
          value: 8,
        },
      ],
    };
  },
  watch: {
    customerData(val) {
      if (val) {
        this.search_data.customerName = val.name;
        this.search_data.customerId = val.id;
      }
    },
    // 店铺
    shopData(val) {
      if (val) {
        this.search_data.shopName = val.name;
        this.search_data.shopId = val.id;
      }
    },
    // 支付方式
    paymentData(val) {
      if (val) {
        this.search_data.payTypeName = val.title;
        this.search_data.payType = val.id;
      }
    },
    // 客户类型
    customerTypeData(val) {
      if (val) {
        this.search_data.customerTypeName = val.name;
        this.search_data.customerType = val.id;
      }
    },
  },
  created() {
    this.getAllOrder();
  },
  methods: {
    // 复制相应信息
    copyOrderInfo(userCenterId, orderId) {
      this.$u.api
        .getOrderInfoById(userCenterId, {
          orderId: orderId,
        })
        .then((res) => {
          const data = res.data;
          let goods = "";
          data.goodsData.forEach((item, index) => {
            goods =
              goods +
              item.goodsName +
              "（" +
              (Number(item.outNum) || Number(item.buyNum)) +
              "件）";
          });
          const copyInfo = `客户：${
            data.customerName
          }\n商品：${goods} \n客户电话：${data.customerMobile}\n业务员：${
            data.salesManName || "无"
          }\n备注：${data.remark || "无"}`;
          uni.setClipboardData({
            data: copyInfo,
            success: () => {
              this.$u.toast("内容已复制");
            },
          });
        });
    },
    // 打开订单来源选择框
    openFrom(key) {
      console.log(13);
      this[key] = true;
    },
    // 搜索项筛选
    selKeyType(index) {
      this.keywordType = this.keywordType_list[index].text;
      this.search_data.keywordType = this.keywordType_list[index].value;
    },
    // 订单来源筛选
    fromChange(e) {
      this.search_data.source = e[0].value;
      this.search_data.sourceName = e[0].label;
    },
    // 上拉加载
    scrollTolower() {
      if (this.total / this.pageSize > this.page) {
        this.page += 1;
        this.getData();
      }
    },
    openSearch() {
      this.search_show = true;
    },
    statusChange(index) {
      this.scrollTop = 0;
      this.$nextTick(() => {
        this.scrollTop = -1;
      });
      this.status_current = index;
      this.order_state = this.status_list[index].value;
      this.searchConfirm();
    },
    clearValue(params) {
      if (!params) {
        this.search_data = {
          keyword: "",
          payType: "",
          payTypeName: "",
          start: "",
          end: "",
          customerId: "",
          customerName: "",
          customerType: "",
          customerTypeName: "",
          source: "",
          sourceName: "",
          shopId: "",
          shopName: "",
        };
        this.searchConfirm();
      } else {
        this.search_data[params] = "";
      }
    },
    searchConfirm() {
      this.search_show = false;
      this.page = 1;
      this.getData();
    },
    //  判断
    getData() {
      const obj = {
        keyword: this.search_data.keyword,
        payType: this.search_data.payType,
        shopId: this.search_data.shopId,
        startTime: this.search_data.start,
        endTime: this.search_data.end,
        customerId: this.search_data.customerId,
        customerType: this.search_data.customerType,
        source: this.search_data.source,
        // returnStatus: this.search_data.Return,
        // outStatus: this.searchDate.outStatus,
        // payStatus: this.searchDate.payStatus,
      };
      const isKey = this.$utils.isSerch(obj);
      if (isKey) {
        this.searchOrder(obj);
      } else {
        this.getAllOrder();
      }
    },
    // 订单列表
    getAllOrder() {
      this.load_status = "loading";
      let params = {
        page: this.page,
        pageSize: this.pageSize,
        state: this.order_state,
      };
      this.$u.api
        .getAllOrder(params)
        .then((res) => {
          // 设置当前下拉刷新状态为false
          this.refresher_triggered = false;
          if (this.page === 1) {
            this.order_list = res.data;
          } else {
            this.order_list = this.order_list.concat(res.data);
          }
          this.order_list = this.order_list.map((item) => {
            return {
              ...item,
              goods_list: item.goods_list || [],
            };
          });
          this.total = res.pageTotal;
          this.load_status = this.$utils.loadStatus(
            this.page,
            this.pageSize,
            this.total
          );
        })
        .catch((err) => {
          // 设置当前下拉刷新状态为false
          this.refresher_triggered = false;
        });
    },
    // 订单列表搜索
    searchOrder(obj) {
      this.load_status = "loading";
      let params = {
        page: this.page,
        pageSize: this.pageSize,
        state: this.order_state,
        keywordType: this.search_data.keywordType,
        ...obj,
      };
      this.$u.api
        .keywordSearch(params)
        .then((res) => {
          // 设置当前下拉刷新状态为false
          this.refresher_triggered = false;
          if (this.page === 1) {
            this.order_list = res.data;
          } else {
            this.order_list = this.order_list.concat(res.data);
          }
          this.order_list = this.order_list.map((item) => {
            return {
              ...item,
              goods_list: item.goods_list || [],
            };
          });
          this.total = res.pageTotal;
          this.load_status = this.$utils.loadStatus(
            this.page,
            this.pageSize,
            this.total
          );
        })
        .catch((err) => {
          // 设置当前下拉刷新状态为false
          this.refresher_triggered = false;
        });
    },
    bindDateStartChange(e) {
      this.search_data.start = this.$utils.timeByTimestamp(
        e.detail.value + " 00:00:00"
      );
    },
    bindDateEndChange(e) {
      this.search_data.end = this.$utils.timeByTimestamp(
        e.detail.value + " 23:59:59"
      );
    },
    // 下拉刷新
    refresherrefresh() {
      this.refresher_triggered = true;
      this.page = 1;
      this.getData();
    },
  },
};
</script>

<style scoped lang="scss">
.order-out-box {
  .order-status-tab {
    width: 100%;

    .keyword-view {
      padding: 20rpx 24rpx;
      background-color: #ffffff;

      .float_left {
        width: 640rpx;
        height: 72rpx;
        line-height: 72rpx;
        background-color: #ecf0f7;
        position: relative;
        border-radius: 40rpx;
        padding-left: 200rpx;
        .key-select {
          text-align: center;
          position: absolute;
          left: 0;
          height: 72rpx;
          width: 200rpx;
          top: 0;
        }
        .search-out {
          width: 438rpx;
        }
        &::before {
          content: "";
          display: block;
          left: 200rpx;
          height: 40rpx;
          width: 2rpx;
          position: absolute;
          background-color: #ced6e2;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      .float_right {
        line-height: 64rpx;
        width: 50rpx;
        text-align: center;
        color: #666666;
      }
    }
  }
}

.top {
  width: 710rpx;
  padding: 24rpx 0rpx 0rpx 32rpx;
  height: 60rpx;
  margin-bottom: 20rpx;

  .txt {
    font-size: 24rpx;
    font-weight: 400;
    color: #879bba;
    line-height: 33rpx;
  }
}

.order_ul {
  height: calc(90vh - 226rpx);

  .order_li {
    background-color: #ffffff;
    padding-top: 32rpx;
    border-radius: 8rpx;
    margin: 0 auto 24rpx;
    width: 710rpx;

    .money-text {
      font-family: DIN-Medium;
      color: $uni-color-error;
      margin: 0 4rpx;
      font-size: 28rpx;
      font-weight: 500;
      margin-left: 30rpx;
    }

    .order_time {
      height: 40rpx;
      line-height: 40rpx;
      padding-right: 20rpx;
      margin-bottom: 24rpx;
      .tag-circleRight {
        display: inline-block;
        margin-left: 40rpx;
        vertical-align: middle;
        .img {
          width: 126rpx;
          height: 40rpx;
          display: block;
        }
      }
      .txt {
        font-size: 28rpx;
        font-weight: 500;
        margin-left: 16rpx;
        font-family: DIN-Medium;
      }
    }

    .order_info {
      padding: 30rpx;
      font-size: 24rpx;
      border-bottom: 1px solid #f7f8fa;
    }

    .remarks {
      background-color: #f1f1f1;
      padding: 0 30rpx;
      height: 60rpx;
      line-height: 60rpx;
    }

    .pay-status-tip {
      margin-left: 0rpx;
      color: #333333;
      height: 89rpx;
      vertical-align: middle;
      padding: 25rpx 40rpx;
      font-size: 28rpx;
      font-weight: 400;
      background: linear-gradient(
        270deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(0, 195, 149, 0.1) 100%
      );

      .txst {
        font-size: 28rpx;
        font-weight: 500;
        color: #2d405e;
      }
    }
    .pay-success {
      background: linear-gradient(
        270deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(0, 195, 149, 0.1) 100%
      );
    }

    .pay-danger {
      background: linear-gradient(
        270deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(246, 119, 120, 0.1) 100%
      );
    }
    .pay-warning {
      background: linear-gradient(
        270deg,
        rgba(255, 255, 255, 0) 0%,
        #fdf6e8 100%
      );
    }

    .order_bottom {
      margin-left: 40rpx;
      font-size: 28rpx;

      .order_params {
        margin-bottom: 24rpx;
        color: #999999;

        .right-txt {
          font-size: 28rpx;
          font-weight: 400;
          color: #2d405e;
          margin-left: 30rpx;
        }

        .float_right {
          color: #333333;
        }
      }

      .printing-btn {
        position: absolute;
        right: 30rpx;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;

        .custom-icon-dayin {
          font-size: 30rpx;
        }
      }

      .btn {
        display: flex;
        justify-content: center;
        margin-top: 30rpx;

        .btn_some {
          width: 200rpx;
          height: 70rpx;
          line-height: 70rpx;
          text-align: center;
          border-radius: 6rpx;
        }

        .btn_examine {
          border: 1px solid #fb5904;
          color: #fb5904;
        }

        .btn_order {
          border: 1px solid #999999;
          color: #999999;
          margin-left: 30rpx;
        }
      }
    }
  }
}
.search-btn {
  .btn-reset {
    color: #fb5904 !important;
  }
  .btn-submit {
    background-color: #fb5904 !important;
  }
}
</style>
